<template>
    <div id="program" class="pt-70">
        <header>
            <div class="P_date">
                <span>时间</span>
                <gDate @faithDate="faithDate"></gDate>
            </div>
            <div class="P_type">
                <div class="Choice">
                    <el-form ref="form" prop="">

                        <el-form-item label="选择小程序">
                            <el-select v-model="selectedOptions" placeholder="选择小程序" @change="handleChange">
                                <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="选择分类">
                            <el-select v-model="selectedOption" placeholder="请选择分类" @change="handleChange1">
                                <el-option label='全部分类' value='' >全部分类</el-option>
                                <el-option :label=item.name :value=item.id v-for="(item,index) in option" :key="index"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="文章标题">
                            <el-input v-model="searchData" placeholder="根据文章标题进行搜索"></el-input>
                        </el-form-item>
                        <el-button @click="search">搜索</el-button>
                    </el-form>
                </div>
            </div>
            <el-button type="primary" class="addBtn" @click="addBtn">添加</el-button>
        </header>
        <main>
            <el-table :data="tableData" border style="width: 100%" stripe show-overflow-tooltip>

                <el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
                <el-table-column prop="appname" label="小程序" align="center"></el-table-column>
                <!-- <el-table-column prop="ispublish" label="是否发布" width="100"></el-table-column> -->
                <el-table-column prop="name" label="分类" width="100" align="center"></el-table-column>
                <el-table-column prop="author" label="作者" width="100" align="center">
                    <template slot-scope="scope">
                        <p>{{scope.row.author}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" align="center">
                     <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.title}}</p>
                            <p slot="reference">{{scope.row.title}}</p>
                        </el-popover>
                    </template>
                </el-table-column>
                

                

                <el-table-column prop="avatar" label="头像" width="100" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.avatar}}</p>
                            <div slot="reference">
                                <img :src=scope.row.avatar alt="" style="margin:0;">
                            </div>
                        </el-popover>
                    </template> 
                </el-table-column>

                <el-table-column prop="imgurl" label="图片" align="center">
                    <template slot-scope="scope">
                        <div class="imgurl">
                            <img :src=item alt="" v-for="(item,index) in scope.row.imgurl" :key="index">
                        </div>
                    </template>
                </el-table-column>




                

                <el-table-column prop="spappid" label="APPID" width="100" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.spappid}}</p>
                            <p slot="reference">{{scope.row.spappid}}</p>
                        </el-popover>
                    </template>

                </el-table-column>
                <el-table-column prop="jiaThumbsUp" label="点赞数" width="100" align="center">
                     <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.jiaThumbsUp}}</p>
                            <p slot="reference">{{scope.row.jiaThumbsUp}}</p>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="跳转参数" width="100" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.path}}</p>
                            <p slot="reference">{{scope.row.path}}</p>
                        </el-popover>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="createtime" label="添加时间" width="200" align="center"></el-table-column> -->

                <el-table-column label="操作" align="center" width="250">
                    <template slot-scope="scope">
                        <el-button @click="publish(scope.row.id)" type="text" size="small">{{scope.row.ispublish==0?'发布':'撤销'}}</el-button>
                        <!-- <el-checkbox label="是否发布" border @change="handleCheckedCitiesChange(scope.row.id)" true-label="1" false-label="0" ></el-checkbox> -->
                        <!-- <router-link to="../news/newsDetails">123</router-link> -->
                        
                        <el-button @click="atlasClick(scope.row.id)" type="text" size="small" v-if="scope.row.imgtype==4?true:false">图集</el-button>



                        <el-button @click="routerClick(scope.row.id)" type="text" size="small" v-if="scope.row.imgtype==3||scope.row.imgtype==4?false:true">详情</el-button>
                        <el-button @click="Release(scope.row.id)" type="text" size="small">复制</el-button>

                        <!-- <el-button @click="Recommend(scope.row.id)" type="text" size="small">推荐</el-button> -->

                        <el-button @click="modifyClick(scope.row.id)" type="text" size="small">修改</el-button>
                        <el-button type="text" size="small" @click="removeClick(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="currPage">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :current-page=currentPage
                    @current-change="handleCurrentChange"
                    :total=total>
                </el-pagination>
            </div>
        </main>
    </div>
</template>

<script>

import Vue from 'vue';
import newsListModify  from '../modify/newsListModify';
import newsListAdd  from '../add/newsListAdd';
import gDate from '../G_Date/gdate';
import newsRelease from './newsRelease';

import { iframe,addList,ModifyList,RemoteList,DataList,getChannel } from '@/assets/js';
export default {
    components:{
        gDate
    },
    data(){
        return {
            selectedOption:'',//选择分类
            selectedOptions:'',//选择小程序
            selectedOptionID:'',//分类ID
            selectedOptionsID:'',//小程序ID
            options:[],
            option:[],
            pageSize:2,
            searchData: '',//搜索内容
            total:0,//默认数据总数
            currentPage:1,//默认开始页面
            tableData: []
        }
    },
    methods:{
        Release:function(e){//同时发布
            let obj = {}
            this.tableData.map((item,index)=>{
                if(item.id == e){
                    // console.log(item)
                    obj.id = item.id;
                    return obj
                }
            })

            iframe(this,newsRelease,obj,[ "800px","300px" ],'复制小程序')
        },
        atlasClick:function(e){//图集
             this.$router.push({path:"../news/newsImg?id="+e})
        },
        routerClick:function(e){//详情
            this.$router.push({path:"../news/newsDetails?id="+e})
        },
        publish:function(e){//发布撤销
            this.tableData.map((item,index)=>{
                if(item.id == e){
                    this.$axios.getAddressJson('/information/publish',{id:e,ispublish:item.ispublish})
                    .then((res)=>{
                        item.ispublish = item.ispublish == 0 ? item.ispublish = 1 : item.ispublish = 0;
                        this.$message({
                            type: 'success',
                            message: item.ispublish == 0 ?'撤回成功':'发布成功'
                        });
                    })
                }
            })
        },
        handleChange:function(e){//change小程序下拉
         
             this.$axios.getAddressJson('/information/getType',{appid:e})
            .then((res)=>{
                this.selectedOptionsID = e;
                this.option = res.data.data;
                this.selectedOption = this.option[0].name;
                this.selectedOption = this.option[0].id;
            })
        },
        handleChange1(e){ 
            this.selectedOptionID = e;
        },//选择分类
        faithDate:function(e){//时间组件
            this.userDate = e;
        },
        addBtn:function(e){//新增小程序
            addList(this,newsListAdd)
        },
        handleCurrentChange:function(e){//点击分页
            this.currentPage = e
            this.CurrData()
        },
        modifyClick:function(e){//修改
            let obj = {}
            this.tableData.map((item,index)=>{
                if(item.id == e){
                    console.log(item)
                    obj.id = item.id;
                    obj.appname = item.appname;
                    obj.appid = item.appid;
                    obj.spappid = item.spappid;
                    obj.path = item.path;
                    obj.name = item.name;
                    obj.tpid = item.tpid;
                    obj.author = item.author;
                    obj.title = item.title;
                    obj.avatar = item.avatar;
                    obj.imgurl = item.imgurl;
                    obj.imgtype = item.imgtype;
                    obj.jiaThumbsUp = item.jiaThumbsUp;
                    obj.isRecommend = item.isRecommend;

                    // console.log(obj)
                    return obj
                }
            })
            ModifyList(this,obj,newsListModify)
        },
        removeClick:function(e){//删除
            let data = { id:e }
            RemoteList(this,data,e,"information/delInformation")
        },
        search:function(){//搜索
            //  this.$loading()
            this.currentPage = 1
            // console.log(this.searchData)
            this.CurrData()
        },
        CurrData:function(){//分页
           
            let data = {
                startTime:this.userDate?this.userDate[0]:'',
                endTime:this.userDate?this.userDate[1]:'',
                page:this.currentPage,
                title:this.searchData,
                tpid:this.selectedOptionID?this.selectedOptionID:'',
                appid:this.selectedOptionsID?this.selectedOptionsID:''
            }

            DataList(this,data,'/information/informationList')
        }
    },
    mounted:function(){
       
        
       
        this.CurrData();
        getChannel(this);
    }
}
</script>
<style>
    .imgurl{
        display:flex;
        justify-content: center
    }
    .el-table td div img{
        margin: 0 10px;
        
    }
</style>






